<template>
  <view>
    <uni-popup ref="ADIntercept" type="center" :mask-click="false">
      <view class="MsgDialog-container">
        <view class="aabg"></view>
        <view class="title">您的免广告权益已用完</view>
        <view class="btns-container">
          <view class='double-btn' @click="toAd" v-if="canShowAd">
            看广告解锁一次
          </view>
          <view class='primary double-btn' @click="toVIP">
            免广告解锁
          </view>
        </view>
      </view>
      <view class="flex-row close-container justify-center">
        <image class="close" @click="close" src="https://down.qwdata.vip/app_icon/bind_merge_dialog_close.png"></image>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import {mapGetters, mapActions} from 'vuex'
import utils from "@/libs/utils";
import {commonApi} from "@/api";

export default {
  name: 'ADIntercept',
  data() {
    return {
      canShowAd: false
    }
  },
  components: {
  },
  computed: {
    ...mapGetters(['mine', 'haveVIP', 'settings', 'needShowAD', 'systemInfo', 'jiliAdId', 'hideAD']),
  },
  mounted() {
  },
  destroyed() {
  },
  created() {
    console.log('this.settings.ADAnswerCount', this.settings.ADAnswerCount)
    console.log('this.mine.answerCount', this.mine.answerCount)

    this.canShowAd = false
    if (!this.needShowAD || this.hideAD) {
      return
    }
    if (uni.canIUse('createRewardedVideoAd')) {
      const params = {}

      // #ifdef APP-PLUS
      params.adpid = this.jiliAdId
      // #endif
      // #ifdef MP-WEIXIN
      params.adUnitId = this.jiliAdId
      // #endif
      this._rewardedVideoAd = uni.createRewardedVideoAd({
        ...params,
        urlCallback: { // 服务器回调透传参数
          userId: this.mine.userId,
          extra: JSON.stringify({
            page: utils.getCurrentPage()
          })
        }
      })

      this._rewardedVideoAd.load()
      this._rewardedVideoAd.onLoad(() => {
        this.canShowAd = true
        console.log('onLoad event')
        uni.hideLoading()
        // 当激励视频被关闭时，默认预载下一条数据，加载完成时仍然触发 `onLoad` 事件
      })
      this._rewardedVideoAd.onError((err) => {
        console.log('onError event', err)
        this.canShowAd = false
        uni.hideLoading()
      })
      this._rewardedVideoAd.onClose(({isEnded}) => {
        commonApi.uploadAD(1)

        this.close()

        if (isEnded) {
          uni.showToast({
            title: '激活成功！',
            icon: 'none', duration: 1000
          });
          setTimeout(() => {
            this.resolve()
            this.resolve = null
          }, 1000)
        } else {
          this.reject()
          this.reject = null
          uni.showToast({
            title: '请看完激励视频广告！',
            icon: 'none', duration: 2000
          });
        }
        console.log('onClose event', isEnded)
      })
    }
  },

  methods: {
    toAd() {
      if (this.canShowAd) {
        this._rewardedVideoAd.show()
      }
    },
    tryOpen() {
      if (this.hideAD) {
        return
      }

      if (!this.needShowAD) {
        return
      }

      // #ifdef H5
      return new Promise((resolve, reject) => {
        this.$refs.ADIntercept.open()
        this.resolve = resolve
        this.reject = reject
      })
      // #endif

      if (!this.jiliAdId) {
        console.log('没有设置激励视频id')
        return
      }

      if (!this.canShowAd) {
        uni.showLoading({
          mask: true
        })
      }

      return new Promise((resolve, reject) => {
        this.$refs.ADIntercept.open()
        this.resolve = resolve
        this.reject = reject
      })
    },
    close() {
      this.$refs.ADIntercept.close()
    },
    toVIP() {
      this.close()
      uni.navigateTo({
        url: '/pages/vip/vip'
      })
    }
  }
}
</script>

<style scoped lang='scss'>
.close-container {
  position: absolute;
  bottom: -150upx;
  left: calc(50% - 29rpx);

  .close {
    width: 58upx;
    height: 60upx;
  }
}

.MsgDialog-container {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 546rpx;
  background-color: #fff;
  border-radius: 50rpx;

  .aabg {
    width: 546rpx;
    background-image: url("http://down.qwdata.vip/app_icon/1706166602691");
    height: 230rpx;
    background-position: center;
    background-size: contain;
  }

  .title {
    margin-top: 42rpx;
    text-align: center;
    color: #000;
    font-size: 19px;
    font-weight: bold;
  }

  .btns-container {
    display: flex;
    margin-top: 48rpx;
    flex-direction: column;
    margin-bottom: 58rpx;
  }

  .double-btn {
    height: 100rpx;
    margin-left: 62rpx;
    margin-right: 62rpx;
    background-color: #1B80FD;
    border-radius: 60rpx;
    display: flex;
    font-size: 15px;
    color: #fff;
    justify-content: center;
    align-items: center;
    margin-top: 32rpx;
    font-weight: bold;

    &:first-child {
      margin-top: 0;
    }

    &.primary {
      background-color: #E3C898;
      color: #0B0B0B;
    }
  }

  .close-btn {
    position: absolute;
    right: 0;
    top: 0;
    padding: 40rpx;

    .icon {
      width: 24rpx;
      height: 24rpx;
    }
  }
}
</style>
